<template>
  <div class="big">
        <header>
            <div class="sou">
                <div class="img3"></div>
                <input type="text" placeholder="按内容输入" class="inp1">
            </div>
        </header>
        <div class="mid">
            <div class="lefside">
                <ul>
                    <li v-for="(item,index) in cate" :key="item.id" :class="index==n?'select':''" @click="n=index">{{item.catename}}</li>
                </ul>
            </div>
            <div class="rigside">
                <div class="box"  v-for="item in cate" :key="item.id">
                   <div class="top" >
                        <p>{{item.catename}}</p>
                        <div v-if="!item.children">暂无二级分类</div>
                    </div> 
                     <ul class="xia">
                        <li v-for="i in item.children" :key="i.id"  @click="$router.push('/list?id='+i.id+'&type=2')">
                            <img :src="$pre+i.img" alt="">
                            <p>{{i.catename}}</p>
                        </li>
                        <!-- <li>
                            <img src="../../assets/img/分类 (2).png" alt="">
                            <p>新品</p>
                        </li>
                        <li>
                            <img src="../../assets/img/分类 (3).png" alt="">
                            <p>好礼专区</p>
                        </li>
                        <li>
                            <img src="../../assets/img/商品列表 (6).png" alt="">
                            <p>美容馆</p>
                        </li>
                        <li>
                            <img src="../../assets/img/商品列表 (4).png" alt="">
                            <p>基础护肤</p>
                        </li> -->
                    </ul> 
                </div>
                <!-- <div class="box">
                    <div class="top">
                        <p>面部护肤</p>
                    </div>
                    <ul class="xia">
                        <li>
                            <img src="../../assets/img/分类 (1).png" alt="">
                            <p>精华</p>
                        </li>
                        <li>
                            <img src="../../assets/img/分类 (2).png" alt="">
                            <p>洁面</p>
                        </li>
                        <li>
                            <img src="../../assets/img/分类 (3).png" alt="">
                            <p>卸妆</p>
                        </li>
                        <li>
                            <img src="../../assets/img/商品列表 (6).png" alt="">
                            <p>精华</p>
                        </li>
                        <li>
                            <img src="../../assets/img/商品列表 (4).png" alt="">
                            <p>面霜</p>
                        </li>
                    </ul>
                </div>
                <div class="box">
                    <div class="top">
                        <p>个护工具</p>
                    </div>
                    <ul class="xia">
                        <li>
                            <img src="../../assets/img/分类 (1).png" alt="">
                            <p>精华</p>
                        </li>
                        <li>
                            <img src="../../assets/img/分类 (2).png" alt="">
                            <p>洁面</p>
                        </li>
                        <li>
                            <img src="../../assets/img/分类 (3).png" alt="">
                            <p>卸妆</p>
                        </li>
                        <li>
                            <img src="../../assets/img/商品列表 (6).png" alt="">
                            <p>精华</p>
                        </li>
                        <li>
                            <img src="../../assets/img/商品列表 (4).png" alt="">
                            <p>面霜</p>
                        </li>
                    </ul>
                </div> -->
            </div>
        </div>
    </div>
    <!-- <div class="bottom">
        <div>
            <img src="../img/index/index (22).png" alt="">
            <p>商城</p>
        </div>
        <div>
            <img src="../img/index/index (21).png" alt="">
            <p>分类</p>
        </div>
        <div>
            <img src="../img/index/index (22).png" alt="">
            <p>购物车</p>
           
        </div>
        <div>
            <img src="../img/index/index (22).png" alt="">
            <p>我</p>
           
        </div>

    </div> -->
    
</template>

<script>
import {reqFenlei} from "../../http/api"
export default {
  data(){
    return{
      //初始化数据
      cate:[],
      n:0
    }
  },
  mounted(){
    //2.请数据
    reqFenlei().then(res=>{
      // console.log(res)
      this.cate=res.data.list;
    })
  }
}
</script>

<style scoped>
.lefside .select {
  color: #ff4400;
}
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.big {
  max-width: 7.5rem;
  margin: 0 auto;
  /* height: 13.6rem; */
  overflow: hidden;
}
header {
  height: 1.16rem;
  background: #ff6345;
  overflow: hidden;
}
header .img3 {
  width: 0.32rem;
  height: 0.32rem;
  margin-top: 0.16rem;
  margin-left: 0.23rem;
  position: absolute;
  /* background: url(../img/index/index\ \(6\).png) no-repeat; */
  background-position: 0px 0px;
  background-size: 0.32rem 0.32rem;
}
header .sou {
  width: 6.43rem;
  height: 0.6rem;
  display: flex;
  justify-content: flex-start;
  margin: 0.3rem auto;
}
.inp1 {
  width: 7.11rem;
  height: 0.67rem;
  background: white;
  border-radius: 5px;
  border: 0;
  font-size: 0.27rem;
  color: #cacaca;
  text-indent: 0.68rem;
  line-height: 0.6rem;
}
.mid {
  display: flex;
  justify-content: flex-start;
}
.lefside {
  width: 2.37rem;
}
.lefside ul li {
  font-size: 0.27rem;
  color: #a6a6a6;
  line-height: 0.95rem;
  text-align: center;
}
.lefside ul li:nth-of-type(2) {
  /* color: red; */
  font-weight: 900;
}
.rigside {
  width: 5.13rem;
  background: #f2efef;
}
.rigside .box {
  width: 5rem;
  height: 4.33rem;
  background: white;
  margin-top: 0.2rem;
  margin-left: 0.1rem;
  padding-top: 0.23rem;
}
.rigside .box .top p {
  font-size: 0.33rem;
  text-indent: 0.2rem;
  font-weight: 900;
}
.rigside .box .xia {
  width: 5rem;
}
.rigside .box .xia li {
  float: left;
  width: 33%;
 
  text-align: center;
}
.rigside .box .xia li img {
  width: 50%;
  height: 1rem;
  border-radius: 50%;
}
.rigside .box .xia li p {
  line-height: 40px;
  height: 40px;
  width: 1.40rem;
  overflow: hidden;
  font-size:0.30rem;
  text-align: center;
}
.bottom {
  height: 1.67rem;
  background: white;
  display: flex;
  justify-content: space-around;
}
.bottom img {
  width: 0.42rem;
  height: 0.44rem;
  margin-left: 2px;
  margin-top: 10px;
}
.bottom p {
  font-size: 0.2rem;
  line-height: 0.5rem;
  color: #c9c9c9;
}
.bottom div:nth-of-type(3) img {
  margin-left: 0.2rem;
}
.bottom div:nth-of-type(4) p {
  text-indent: 4px;
}
.bottom div:nth-of-type(2) p {
  color: red;
}


</style>